<template>
	<view :style="'min-height:'+viewH+'px;'">
		<!-- #ifdef MP -->
		<!-- MP 导航栏 -->
		<view class="flex align-center px-1 bg-light fixed-top" style="height: 44px;">
			<view class="flex flex-1 rounded-circle bg-white" style="color:#959FA0;line-height: 30px;"
			@click="$Util.navigateTo('search')">
				<text class="iconfont iconsousuokuang mx-1" style="font-size: 22px; "></text>
				<text>热门搜索：uni-app</text>
				<!-- <input type="text" placeholder="热门搜索：uni-app" style="height: 30px;" /> -->
			</view>
		</view>
		<!-- 由于顶部固定的导航栏会遮住页面内容，因此这里需要做一个站位view -->
		<view style="min-height: 44px;"></view>
		<!-- #endif -->
		
		<card title="热门分类" :showRefresh="false">
			<scroll-view scroll-x="true" class="scroll-row py-2">
				<view v-for="(item, index) in list2" :key="index" class="scroll-row-item" style="width: 187.5rpx; height: 187.5rpx;">
					<view class="flex flex-column justify-center align-center" style="height: 100%;" @click="open(item)">
						<image :src="item.cover" mode="aspectFill" style="height: 70rpx; width: 70rpx;"></image>
						<text class="font text-muted">{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</card>
		<!-- 分割线 -->
		<view class="f-divider"></view>
		
		<!-- 全部分类 -->
		<card title="全部分类" :showRefresh="false">
			<view class="flex flex-wrap align-center justify-between py-3">
				<view v-for="(item, index) in list" :key="index" class="flex align-center justify-center"
				style="width: 187.5rpx; height: 187.5rpx;">
					<view class="flex flex-column justify-center align-center" @click="open(item)">
						<image :src="item.cover" mode="aspectFill" style="height: 70rpx; width: 70rpx;"></image>
						<text class="font text-muted">{{item.title}}</text>
					</view>
				</view>
			</view>
		</card>
		<!-- 分割线 -->
	</view>
</template>

<script>
	import card from '@/components/common/card.vue';
	export default {
		components:{
			card
		},
		data() {
			return {
				list:[],
				list2:[],
				viewH:0
			}
		},
		onLoad() {
			this.getData();
			let res = uni.getSystemInfoSync()
			// uni.showToast({
			// 	title:'h='+res.windowHeight
			// })
			this.viewH = res.windowHeight+100
		},
		onPullDownRefresh() {
			this.getData().then(()=>{
				uni.showToast({
					title:'下拉刷新成功',
					icon:'none'
				})
			}).finally(()=> {
				uni.stopPullDownRefresh();
			});
		},
		onNavigationBarSearchInputClicked() {
			//console.log("导航栏输入框被点击")
			uni.navigateTo({
				url:'../search/search'
			})
		},
		methods: {
			async getData(){
				uni.showLoading();
				return this.$H.get('/category').then(res=>{
					this.list = this.list2 = res;
					//console.log(res);
					// 如果list的长度大于6，需要对list2进行深度拷贝
					if(res.length > 6){
						this.list2 = JSON.parse(JSON.stringify(res));
						this.list2.splice(6,this.list2.length-6);
					}
				}).finally(()=> {
					uni.hideLoading();
				});
			},
			
			open(item){
				uni.navigateTo({
					url:'../list/list?id='+item.id+'&title='+item.title,
				})
			}
		}
	}
</script>

<style>
 scroll-view ::-webkit-scrollbar {
 display: none !important;
 width: 0 !important;
 height: 0 !important;
 -webkit-appearance: none;
 background: transparent;
 }
</style>
